import {Card, Col, Row} from "antd"
import UserAvatar from "@/commponent/UserAvatar";

import styles from "./home.module.scss"
import SvgIcon from "@/commponent/SvgIcon";
import {PageWrapperBox} from "@/layout/Page";


import img_01 from "@/assets/images/home/01.png"
import img_02 from "@/assets/images/home/02.png"
import img_03 from "@/assets/images/home/03.png"
import img_04 from "@/assets/images/home/04.png"


/*
export default function HomeIndex() {
    return <PageWrapperBox>
        <div className={styles.homeLayout}>
            <div className={styles.box}>
                <Card className={styles.left} title={'欢迎使用'}>
                    <div className={styles.welcomeBox}>
                        <div>
                            <p>云想衣裳花想容，春风拂面露华浓。</p>
                        </div>
                        <UserAvatar/>
                    </div>
                </Card>
                <Card className={styles.right} title={'网站在线'}>
                    <div className={styles.time}>小站已运行<span>30</span>天</div>
                </Card>
            </div>
            <div className={styles.box}>
                <div className={styles.left}>
                    <div className={styles.someCard}>
                        <div className={styles.oneCard}>
                            <SvgIcon size={60} name={"CustomListCard"}/>
                            <div className={styles.cardText}>
                                <span>文章数量</span>
                                <br/>
                                <span>89</span>
                            </div>
                        </div>
                        <div className={styles.oneCard}>
                            <SvgIcon size={60} name={"CustomListCard"}/>
                            <div className={styles.cardText}>
                                <span>文章数量</span>
                                <br/>
                                <span>89</span>
                            </div>
                        </div>
                        <div className={styles.oneCard}>
                            <SvgIcon size={60} name={"CustomListCard"}/>
                            <div className={styles.cardText}>
                                <span>文章数量</span>
                                <br/>
                                <span>89</span>
                            </div>
                        </div>
                        <div className={styles.oneCard}>
                            <SvgIcon size={60} name={"CustomListCard"}/>
                            <div className={styles.cardText}>
                                <span>文章数量</span>
                                <br/>
                                <span>89</span>
                            </div>
                        </div>
                    </div>
                </div>
                <Card className={styles.right}>

                </Card>
            </div>
        </div>
    </PageWrapperBox>
}
*/


export default function HomeIndex() {


    const todoCard = [
        {
            title: '待办事项',
            icon: img_01,
            count: 10,
            color: '#1890ff'
        },
        {
            title: '用户数量',
            icon: img_02,
            count: 10,
            color: '#1890ff'
        },
        {
            title: '角色数量',
            icon: img_03,
            count: 10,
            color: '#1890ff'
        },
        {
            title: '通知消息',
            icon: img_04,
            count: 7,
            color: '#f5222d'
        }
    ]

    return <PageWrapperBox>
        <Row gutter={24}>
            {
                todoCard.map((item, index) => {
                    return <Col xs={24} sm={12} lg={6} key={index} style={{marginBottom: 16}}>
                        <Card>
                            <div className={styles.oneCard}>
                                <div className={styles.cardIcon}>
                                    <img src={item.icon} alt=""/>
                                </div>
                                <div className={styles.todoCardText}>
                                    <div className={styles.todoCardTitle}>{item.title}</div>
                                    <div className={styles.todoCardCount}>{item.count}</div>
                                </div>
                            </div>
                        </Card>
                    </Col>
                })
            }

        </Row>
    </PageWrapperBox>
}
